import QtQuick 2.2

Rectangle {
    id: vk

    property string rotateLeft: "\u2939"
    property string rotateRight: "\u2935"
    property string leftArrow: "\u2190"
    property string upperArrow: "\u2191"
    property string division : "\u00f7"
    property string multiplication : "\u00d7"
    property string squareRoot : "\u221a"
    property string plusminus : "\u00b1"
    property int volnum: (lineWidthCtrl.value+0.1)

    signal buttonPressed(string op)

    onVolnumChanged:{
        console.log(lineWidthCtrl.value)
        buttonPressed(volnum.toString());
    }

    // span the parent's width
    anchors {
        left: parent.left
        right: parent.right
    }

    // A virtual keyboard (VK) is attached the the bottom of an Item
    // and slides up when activated.
    // this item is called the surface
    property Item surface: parent

    // By default the VK's height is at the bottom of the surface
    y: surface.height

    // Depending on the parent's focus, set the initial state
    state: parent.activeFocus ? "active" : "inactive"

    Column {
        id: vkc;

        anchors {
            horizontalCenter: parent.horizontalCenter
            margins: 4
        }

        spacing: 4

        Slider {id:lineWidthCtrl; min:0; max:10; init:dialogComponent.defvol; name:"Volume"}


//        Row {
//            spacing: 4
//            anchors.horizontalCenter: parent.horizontalCenter
//           Buttontmp {text: "0" ;op: "0";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp {text: "1" ;op: "1";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp { text: "2" ;op: "2";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp {text: "3" ;op: "3";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp { text: "4" ;op: "4";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp {text: "5" ;op: "5";Component.onCompleted: clicked.connect(buttonPressed)}
//        }
//        Row {
//            spacing: 4
//            anchors.horizontalCenter: parent.horizontalCenter
//           Buttontmp { text: "6" ;op: "6";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp {text: "7" ;op: "7";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp { text: "8" ;op: "8";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp {text: "9" ;op: "9";Component.onCompleted: clicked.connect(buttonPressed)}
//           Buttontmp { text: "10" ;op: "10";Component.onCompleted: clicked.connect(buttonPressed)}
//        }
    }

    states: [
        State {
            name: "active"
            PropertyChanges { target: vk; y: (3*surface.height/4 - vkc.height/2+50); }
        },
        State {
            name: "inactive"
            PropertyChanges { target: vk; y: 2*surface.height ; }
        }
    ]

    transitions: Transition {
        NumberAnimation {
            target: vk
            property: "y"
            easing.type: "OutQuad"
            duration: 250
        }
    }

    function setvol(n)
    {
        var sn = n*1.0
        lineWidthCtrl.setValue(sn)
    }
}
